<template>
  <div class="text">
    <form action="" class="form">
      <el-input class="text" v-model="text" placeholder="账号"></el-input>
      <el-input
        v-model="psw"
        placeholder="密码"
        type="password"
        v-if="showPsw"
      ></el-input>
      <el-input
        v-model="psw"
        placeholder="密码"
        type="text"
        class="psw_contain"
        v-if="!showPsw"
      >
      </el-input>
    </form>
    <el-switch
      class="switch_psw"
      v-model="value"
      inactive-color="#13ce66"
      active-color="#ccc"
    >
    </el-switch>
  </div>
</template>


<script>
export default {
  data() {
    return {
      text: "",
      psw: "",
      value: true,
      count: "admin",
      pswd: "123456",
    };
  },
  computed: {
    showPsw() {
      return this.value;
    },
  },
};
</script>

<style scoped>
.text {
  position: relative;
  margin-bottom: 30px;
}
.form :nth-child(n) {
  height: 42px;
}
.switch_psw {
  position: absolute;
  display: block;
  height: 20px;
  top: 84px;
  right: 10px;
}
</style>